<template>
  <div class="container">
    <div class="header">
      <NavBar :title="pageTitle" left-arrow color="#333333" @click-left="back" @click-right="backHome">
        <template #right>
          <Icon name="wap-home-o" size="20" />
        </template>
      </NavBar>
    </div>
    <div class="main">
      <div class="tips">请输入</div>
      <!-- 密码输入框 -->
      <PasswordInput
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      ></PasswordInput>
      <!-- 数字键盘 -->
      <NumberKeyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
        @input="onInput"
        @delete="onDelete"
      ></NumberKeyboard>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, PasswordInput, NumberKeyboard , Dialog } from "vant";
import { editPassword , payOrder } from '@/model/api';
export default {
  components: { NavBar, Icon, PasswordInput, NumberKeyboard },
  data() {
    return {
      mode:"",
      orderId:"",
      pageTitle: "修改支付密码",
      value: "",
      showKeyboard: true,
    };
  },
  methods:{
    onInput(key) {
        this.value = (this.value + key).slice(0, 6);
        if(this.value.length == 6){
            this.submit()
        }
    },
    onDelete() {
        this.value = this.value.slice(0, this.value.length - 1);
    },
    submit(){
       if(this.mode == 1){
            editPassword({pay_password:this.value}).then( res => {
                if(res.code == 1){
                    Dialog.alert({
                      title: '提示',
                      message: res.msg,
                      theme:"round",
                      confirmButtonColor:"#6B68FF",
                    }).then(() => {
                       this.$router.go(-1)
                    });
                }else{
                  this.$toast(res.msg)
                }
            })
        }else if(this.mode == 2){
            payOrder({
              id:this.orderId,
              pay_password:this.value,
            }).then( res => {
                if(res.code == 1){
                    Dialog.alert({
                      title: '提示',
                      message: res.msg,
                      theme:"round",
                      confirmButtonColor:"#6B68FF",
                    }).then(() => {
                        this.$router.push({
                            path: "/taborder",
                            query:{active:3}
                        })
                    });
                }else{
                  this.$toast(res.msg)
                }
            })
        }
    }
  },
  created(){
    let { mode , id = ""} = this.$route.query;
    this.mode = mode; // 1是修改支付密码  2是支付订单
    this.orderId = id;
  }
};
</script>

<style lang="less" scoped>
.tips{
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #CCCCCC;
}
</style>